<template>
	<view>
		
		<view class="vi1">
			<view class="vi2">
				<view class="flex-row wrapper">
					<u-image class="im"
						:src="user.picture"
						width="112rpx" height="112rpx" shape="circle"></u-image>
					<view class="flex-col flex-row wraper-col vi3">
						<view class="u-line-1 text">{{user.name}}</view>
						<view class="u-line-1 text-two">产品部/产品经理</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view style="margin: 10rpx 10rpx 0rpx 250rpx; font-size: 20px; margin-top: 30px;">

			<text class="ts1">{{s.time}}明细</text>
		</view>
		<view style="background-color: #fff; margin-top: 30px;">
			<br>
			<text class="t1">社保明细</text>
			<br><br>
			<view style="width: 90%;margin: 0 auto;">
			<table width="100%" cellspacing="0" cellpadding="5">
				<thead>
					<tr class="trr1">
						<th>险种</th>
						<th>个人金额</th>
						<th>公司金额</th>
						<th>交费合计</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item, index) in detailedList1" :key="item.did" class="tr1" >
						<td  class="tdd1" align="center">{{item.insurance}}</td>
						<td align="center">{{item.person}}</td>
						<td align="center">{{item.company}}</td>
						<td align="center">{{item.total}}</td>
					</tr>

				</tbody>
			</table>
			</view>
		</view>
		<view style="background-color: #fff; margin-top: 30px;">
			<br>
			<text class="t1">公积金明细</text>
			<br><br>
			<view style="width: 90%;margin: 0 auto;">
			<table width="100%" cellspacing="0" cellpadding="5">
				<thead>
					<tr class="trr1">
						<th>险种</th>
						<th>个人金额</th>
						<th>公司金额</th>
						<th>交费合计</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item, index) in detailedList2" :key="item.did" class="tr1">
						<td  class="tdd1" align="center">{{item.insurance}}</td>
						<td align="center">{{item.person}}</td>
						<td align="center">{{item.company}}</td>
						<td align="center">{{item.total}}</td>
					</tr>
				</tbody>
			</table>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		onLoad: function(option) {
			console.log("接收到的参数" + option.sid);
			this.detailed.sid = option.sid

		},
		data() {
			return {
				detailed: {},
				detailedList1: null,
				detailedList2: null,
				s:{},
				user:{}
			}
		},
		created() {
			this.user=uni.getStorageSync('user')
			console.log(this.user)
			//获取用户头像
			uni.request({
				url: "http://localhost:8007/conference/social/getIdPic/"+this.user.eid,
				method: 'get',
				success: (res) => {
					console.log(res)
					this.user.picture = res.data.data.p.picture
					// console.log(this.dataList[0].paytime.)
				}
			})
			
			console.log("传入的参数是：：：" + this.detailed.sid);
			uni.request({
				url: "http://localhost:8007/conference/detailed/findAll/" + this.detailed.sid,
				method: 'get',
				success: (res) => {
					console.log(res)
					this.detailedList1 = res.data.data.list1
					this.detailedList2 = res.data.data.list2
					this.s = res.data.data.s

				}
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.ts1{
		font-size: 23px;
		color: #000;
		margin-left: -20px;
	}
	.t1 {
		font-size: 23px;
		color: #000;
		margin-left: 20px;
	}

	.tt1 {
		font-size: 28px;
		color: #000;
	}

	.content {
		width: 300px;
		height: 300px;
		margin: 0 auto;
		/*水平居中*/
		position: relative;
		top: 50%;
		/*偏移*/
		margin-top: -150px;
	}

	.tr1 .th {
		font-size: 15px;
		color: #b5baca;
	}

	td {
		font-size: 16px;
		border-bottom:1px solid #f5f5f5;
		padding-top: 10px;
		padding-bottom: 15px;
	}
	.tdd1{
		color: #b5baca;
	}

	.trr1 {
		font-size: 18px;
		font-weight:lighter;
		background-color: #f9f9f9;
	}

	.trrs1 {
		font-size: 23px;
	}
	
	/*  头部开始	  */
	.flex-row {
		display: flex;
		align-items: flex-start;
	}
	
	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}
	
	.text {
		width: 73px;
		margin-bottom: 14px;
		font-size: 20px;
	}
	
	.text-two {
		width: 100%;
		font-size: 12px;
	}
	
	.vi1 {
		width: 91%;
		height: 80px;
		background-color: white;
		margin: 10px 0px 0px 15px;
	}
	
	.vi2 {
		float: left;
		margin: 15px 0px 0px 20px;
	}
	
	.vi3 {
		margin: 0px 0px 0px 20px;
	}
	
	/* 头部结束	 */
	
</style>
